<!--教室申请-->
<template>
  <el-card style="margin: 20px; overflow: hidden; height: 660px;">
    <el-form label-width="100px">
      <el-row :gutter="10" style="margin-top: 40px;">
        <el-col :span="12">
          <el-form-item label="使用时间">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="clsapplyFrom.startTime"
            ></el-date-picker>
          </el-form-item>

          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="18">
              <el-form-item label="申请人姓名">
                <el-input v-model="clsapplyFrom.username" placeholder="请输入申请人姓名" />
              </el-form-item>
            </el-col>


          </el-row>

          <el-form-item label="使用目的" style="margin-top: 10px;">
            <el-input
                v-model="clsapplyFrom.reason"
                :autosize="{ minRows: 4, maxRows: 60 }"
                type="textarea"
                placeholder="(例如：课程教学，考试，讲座，活动等)"
            />
          </el-form-item>
          <el-form-item label="特殊设备" style="margin-top: 10px;">
            <el-input
                v-model="clsapplyFrom.need"
                :autosize="{ minRows: 4, maxRows: 60 }"
                placeholder="(例如：投影仪，电脑等)"
            />
          </el-form-item>
          <el-form-item label="特殊要求" style="margin-top: 10px;">
            <el-input
                v-model="clsapplyFrom.request"
                :autosize="{ minRows: 4, maxRows: 60 }"
                placeholder="(例如：教室布置，技术支持等)"
            />
          </el-form-item>

          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="12">
              <el-form-item label="预计参加人数">
                <el-input v-model="clsapplyFrom.people" />
              </el-form-item>
            </el-col>

          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="10">
          </el-row>
        </el-col>
        <el-col :span="12">

          <el-row :gutter="10">
            <el-col :span="12">

            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-button type="primary" @click="submit"
               style="float: right;
               width: 100px;
               margin-top: 100px;">提交</el-button>

  </el-card>
</template>

<script setup>
import { ref } from "vue";
import qs from "qs";
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";

const clsapplyFrom = ref({
  username: '',
  startTime: [],
  endTime: [],
  reason: '',
  need: '',
  request: '',
  people: '',
});

let userInfo = getUser();

// 提交表单
const submit = () => {
  if (!clsapplyFrom.value.startTime[0] || !clsapplyFrom.value.startTime[1]) {
    errorInfo('请选择维护时间');
    return;
  }
  if (!clsapplyFrom.value.reason) {
    errorInfo('请输入使用目的');
    return;
  }
  if (!clsapplyFrom.value.need) {
    errorInfo('请输入特殊设备');
    return;
  }
  if (!clsapplyFrom.value.request) {
    errorInfo('请输入特殊要求');
    return;
  }
  if (!clsapplyFrom.value.people) {
    errorInfo('请输入预计参加人数');
    return;
  }
  clsapplyFrom.value.Id = '1';
  clsapplyFrom.value.userId = userInfo.id;
  clsapplyFrom.value.username = userInfo.username;
  clsapplyFrom.value.phone = userInfo.phone;
  clsapplyFrom.value.email = userInfo.email;
  clsapplyFrom.value.department = userInfo.department;
  clsapplyFrom.value.type = `repair`;
  clsapplyFrom.value.startTime = clsapplyFrom.value.startTime[0];
  clsapplyFrom.value.endTime = clsapplyFrom.value.endTime[1];
  clsapplyFrom.value.approver = '假名';

  let data = qs.stringify(clsapplyFrom.value);
  axios.post(BASE_URL + '/v1/roomRequire/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功!');
          clearAll();
          router.push('/applicationList');
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
      .catch((error) => {
        ElMessage({
          message: '提交失败，请稍后再试',
          type: 'error',
          showClose: true,
          center: true,
        });
      });
};

// 清空表单
const clearAll = () => {
  clsapplyFrom.value.username = '';

  clsapplyFrom.value.startTime = [];
  clsapplyFrom.value.reason = '';
  clsapplyFrom.value.need = '';
  clsapplyFrom.value.request = '';
  clsapplyFrom.value.people = '';
};


</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>